<!DOCTYPE HTML>
<!--[if IE 8]> <html class="ie8 no-js"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
	<!-- begin meta -->
	<meta charset="utf-8">
	<meta name="description" content="Finesse is a responsive business and portfolio theme carefully handcrafted using the latest technologies. It features a clean design, as well as extended functionality that will come in very handy.">
	<meta name="keywords" content="Finesse, responsive business portfolio theme, HTML5, CSS3, clean design">
	<meta name="author" content="Ixtendo">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- end meta -->
	
	<!-- begin CSS -->
	<link href="style.css" type="text/css" rel="stylesheet" id="main-style">
	<!--[if IE]>
    <link href="../static/css/ie.css" type="text/css" rel="stylesheet"> <![endif]-->
	<link href="../static/css/colors/orange.css" type="text/css" rel="stylesheet" id="color-style">
    <!-- end CSS -->
	
	<link href="../static/images/favicon.ico" type="image/x-icon" rel="shortcut icon">
	
	<!-- begin JS -->
    <script src="../static/js/jquery-1.7.2.min.js" type="text/javascript"></script> <!-- jQuery -->
    <script src="../static/js/ie.js" type="text/javascript"></script> <!-- IE detection -->
    <script src="../static/js/jquery.easing.1.3.js" type="text/javascript"></script> <!-- jQuery easing -->
	<script src="../static/js/modernizr.custom.js" type="text/javascript"></script> <!-- Modernizr -->
    <!--[if IE 8]>
    <script src="../static/js/respond.min.js" type="text/javascript"></script><![endif]--> <!-- Respond -->
	<script src="../static/js/jquery.polyglot.language.switcher.js" type="text/javascript"></script> <!-- language switcher -->
    <script src="../static/js/ddlevelsmenu.js" type="text/javascript"></script> <!-- drop-down menu -->
    <script type="text/javascript"> <!-- drop-down menu -->
        ddlevelsmenu.setup("nav", "topbar");
    </script>
    <script src="../static/js/tinynav.min.js" type="text/javascript"></script> <!-- tiny nav -->
    <script src="../static/js/jquery.ui.totop.min.js" type="text/javascript"></script> <!-- scroll to top -->
    <script src="../static/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> <!-- tabs, toggles, accordion -->
	<script src="../static/js/jquery.tweet.js" type="text/javascript"></script> <!-- Twitter widget -->
	<script src="../static/js/jquery.touchSwipe.min.js" type="text/javascript"></script> <!-- touchSwipe -->
    <script src="../static/js/custom.js" type="text/javascript"></script> <!-- jQuery initialization -->
    <!-- end JS -->
	
	<title>Finesse - Elements</title>
</head>

<body>
<!-- begin container -->
<div id="wrap">
	<!-- begin header -->
        <header id="header" class="container">
            <!-- begin header top -->
            <section id="header-top" class="clearfix">
                <!-- begin header left -->
                <div class="one-half">
                    <h1 id="logo"><a href="index.html"><img src="../static/images/logo.png" alt="Finesse"></a></h1>
                    <p id="tagline">Responsive Business Theme</p>
                </div>
                <!-- end header left -->
                
                <!-- begin header right -->
                <div class="one-half column-last">
                    <!-- begin language switcher -->
                    <div id="polyglotLanguageSwitcher">
                        <form action="#">
                            <select id="polyglot-language-options">
                                <option id="en" value="en" selected>English</option>
                                <option id="fr" value="fr">Fran&ccedil;ais</option>
                                <option id="de" value="de">Deutsch</option>
                                <option id="it" value="it">Italiano</option>
                                <option id="es" value="es">Espa&ntilde;ol</option>
                            </select>
                        </form>
                    </div>
                    <!-- end language switcher -->
                    
                    <!-- begin contact info -->
                    <div class="contact-info">
                        <p class="phone">(123) 456-7890</p>
                        <p class="email"><a href="mailto:info@finesse.com">info@finesse.com</a></p>
                    </div>
                    <!-- end contact info -->
                </div>
                <!-- end header right -->
            </section>
            <!-- end header top -->
            
            <!-- begin navigation bar -->
            <section id="navbar" class="clearfix">
                <!-- begin navigation -->
                <nav id="nav">
                    <ul id="navlist" class="clearfix">
                        <li><a href="index.html" rel="submenu1">Home</a>
                        	<ul id="submenu1" class="ddsubmenustyle">
                                <li><a href="index.html">Home Version 1</a></li>
                                <li><a href="index-2.html">Home Version 2</a></li>
                            </ul>
                        </li>
                        <li><a href="about-us.html" rel="submenu2">Templates</a>
                            <ul id="submenu2" class="ddsubmenustyle">
                            	<li><a href="about-us.html">About Us</a></li>
                            	<li><a href="services.html">Services</a></li>
                                <li><a href="testimonials.html">Testimonials</a></li>
                                <li><a href="sitemap.html">Sitemap</a></li>
                                <li><a href="404-error-page.html">404 Error Page</a></li>
                                <li><a href="search-results.html">Search Results</a></li>
                                <li><a href="full-width-page.html">Full Width Page</a></li>
                                <li><a href="page-right-sidebar.html">Page with Right Sidebar</a></li>
                                <li><a href="page-left-sidebar.html">Page with Left Sidebar</a></li>
                                <li><a href="#">Multi-Level Drop-Down</a>
                                    <ul>
                                        <li><a href="#">Drop-Down Example</a></li>
                                        <li><a href="#">Multi-Level Drop-Down</a>
                                            <ul>
                                                <li><a href="#">Drop-Down Example</a></li>
                                                <li><a href="#">Drop-Down Example</a></li>
                                                <li><a href="#">Drop-Down Example</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Drop-Down Example</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="current"><a href="elements.html" rel="submenu3">Features</a>
                            <ul id="submenu3" class="ddsubmenustyle">
                            	<li><a href="elements.html">Elements</a></li>
                                <li><a href="grid-columns.html">Grid Columns</a></li>
                                <li><a href="pricing-tables.html">Pricing Tables</a></li>
                                <li><a href="images.html">Images</a></li>
                                <li><a href="video.html">Video</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html" rel="submenu4">Portfolio</a>
                            <ul id="submenu4" class="ddsubmenustyle">
                                <li><a href="portfolio.html">Portfolio Overview</a></li>
                                <li><a href="portfolio-item-slider.html">Portfolio Item &ndash; Slider</a></li>
                                <li><a href="portfolio-item-image.html">Portfolio Item &ndash; Image</a></li>
                                <li><a href="portfolio-item-embedded-video.html">Portfolio Item &ndash; Embedded Video</a></li>
                                <li><a href="portfolio-item-self-hosted-video.html">Portfolio Item &ndash; Self-Hosted Video</a></li>
                            </ul>
                        </li>
                        <li><a href="blog.html" rel="submenu5">Blog</a>
                            <ul id="submenu5" class="ddsubmenustyle">
                                <li><a href="blog.html">Blog Overview</a></li>
                                <li><a href="blog-post.html">Blog Post</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
                <!-- end navigation -->
                
                <!-- begin search form -->
                <form id="search-form" action="search.php" method="get">
                    <input id="s" type="text" name="s" placeholder="Search &hellip;" style="display: none;">
                    <input id="search-submit" type="submit" name="search-submit" value="Search">
                </form>
                <!-- end search form -->
            </section>
            <!-- end navigation bar -->
            
        </header>
        <!-- end header -->
        
    <!-- begin content -->
        <section id="content" class="container clearfix">
        	<!-- begin page header -->
            <header id="page-header">
            	<h1 id="page-title">Elements</h1>	
            </header>
            <!-- end page header -->
        	
            <!-- begin main content -->
            	
			<!-- begin tabs -->
            <section class="one-fourth">
                <h2>Tabs</h2>
                <div class="tabs">
                    <ul class="nav clearfix">
                        <li><a href="#tab-1">Title 1</a></li>
                        <li><a href="#tab-2">Title 2</a></li>
                        <li><a href="#tab-3">Title 3</a></li>
                    </ul>
                    <div id="tab-1" class="tab">
                        <p>Aliquam vestibulum, sapien sit amet imperdiet placerat, mi augue euismod augue, sit amet tincidunt nisi quam a quam.</p>
                        <p>Suspendisse molestie metus leo, in hendrerit lacus. Donec pellentesque gravida enim at.</p>
                    </div>
                    
                    <div id="tab-2" class="tab">
                        <p>Maecenas venenatis luctus neque. Duis aliquam urna ac quam gravida et laoreet urna pulvinar. Praesent et nisi ipsum.</p>
                        <p>Aliquam aliquet dui eu odio imperdiet dignissim. Donec et sapien nisl. Integer in dolor tortor.</p>
                    </div>
                    <div id="tab-3" class="tab">
                        <p>Cras convallis lorem vitae nunc mollis adipiscing. Donec tincidunt odio vel metus imperdiet semper. In volutpat orci in leo ornare sed.</p>
                        <p>Donec rutrum purus vitae nisi pharetra id lacinia enim ullamcorper. Mauris dictum, orci.</p>
                    </div>
                </div>
            </section>
            <!-- end tabs -->
				
			<!-- begin toggles -->
            <section class="one-fourth">
                <h2>Toggles</h2>
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title">Title goes here</span>
                    <div class="toggle-inner">
                        <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                        <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title">Title goes here</span>
                    <div class="toggle-inner">
                        <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                        <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title">Title goes here</span>
                    <div class="toggle-inner">
                        <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                        <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title">Title goes here</span>
                    <div class="toggle-inner">
                        <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                        <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                    </div>
                </div>
                <!-- end toggle -->
            </section>
            <!-- end toggles -->
				
			<!-- begin accordion -->
            <section class="one-fourth">
                <h2>Accordion</h2>
                <div class="accordion">
                    <div>
                        <span class="accordion-title">Title goes here</span>
                        <div class="accordion-inner">
                            <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                            <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                        </div>
                    </div>
                        
                    <div>
                        <span class="accordion-title">Title goes here</span>
                        <div class="accordion-inner">
                            <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                            <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                        </div>
                    </div>
                        
                    <div>
                        <span class="accordion-title">Title goes here</span>
                        <div class="accordion-inner">
                            <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                            <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                        </div>
                    </div>
                        
                    <div>
                        <span class="accordion-title">Title goes here</span>
                        <div class="accordion-inner">
                            <p>In hac habitasse platea dictumst. Aenean malesuada, lectus quis hendrerit iaculis, ipsum nibh malesuada sapien.</p>
                            <p>Fusce posuere adipiscing nisi, eget dapibus urna accumsan in. Cras eleifend magna nec sem.</p>
                        </div>
                    </div>
                </div>
            </section>
            <!-- end accordion -->
            
            <!-- begin notification boxes -->
            <section class="one-fourth column-last">
                <h2>Notification Boxes</h2>
                <div class="notification-box notification-box-info">
                    <p>Your information text.</p>
                    <a href="#" class="notification-close notification-close-info">x</a>
                </div>
                <div class="notification-box notification-box-success">
                    <p>Your success text.</p>
                    <a href="#" class="notification-close notification-close-success">x</a>
                </div>
                <div class="notification-box notification-box-warning">
                    <p>Your warning text.</p>						
                    <a href="#" class="notification-close notification-close-warning">x</a>
                </div>
                <div class="notification-box notification-box-error">
                    <p>Your error text.</p>
                    <a href="#" class="notification-close notification-close-error">x</a>
                </div>
            </section>
            <!-- end notification boxes -->
            
            <div class="clear"></div>
            <hr>
            
            <!-- begin buttons -->
            <section>
            	<h2>Buttons</h2>
                <h3>Normal Buttons</h3>
                <a class="button orange" href="#">Button Text</a>
                <a class="button green" href="#">Button Text</a>
                <a class="button blue" href="#">Button Text</a>
                <a class="button light-orange" href="#">Button Text</a>
                <a class="button red" href="#">Button Text</a>
                <a class="button purple" href="#">Button Text</a>
                <a class="button pink" href="#">Button Text</a>
                <a class="button teal" href="#">Button Text</a>
                <a class="button black" href="#">Button Text</a>
                <h3>Large Buttons</h3>
                <a class="button orange large" href="#">Button Text</a>
                <a class="button green large" href="#">Button Text</a>
                <a class="button blue large" href="#">Button Text</a>
                <a class="button light-orange large" href="#">Button Text</a>
                <a class="button red large" href="#">Button Text</a>
                <a class="button purple large" href="#">Button Text</a>
                <a class="button pink large" href="#">Button Text</a>
                <a class="button teal large" href="#">Button Text</a>
                <a class="button black large" href="#">Button Text</a>
            </section>
            <!-- end buttons -->
            
            <hr>
            
            <!-- begin dropcaps -->
            <section class="one-fourth">
            	<h2>Dropcaps</h2>
                <p><span class="dropcap simple">P</span>raesent eget elit vitae eros ornare euismod. Sed vel condimentum neque. Donec vel sem ac nisl accumsan mollis. Praesent est. Duis dignissim euismod porta.</p>
                <p><span class="dropcap with-bg">C</span>urabitur lectus neque, viverra sed convallis et, aliquam sit amet sem. Fusce non lectus sit amet tortor tincidunt sagittis et. Donec eu nisl dolor.</p>
            </section>
            <!-- end dropcaps -->
            
            <!-- begin highlights -->
            <section class="one-fourth">
            	<h2>Highlights</h2>
                <p><mark class="highlight colored">Praesent eget elit vitae</mark> eros ornare euismod. Sed vel condimentum neque. Donec vel sem ac nisl accumsan mollis. Praesent est. Duis dignissim euismod porta.</p>
                <p><mark class="highlight black">Curabitur lectus neque</mark>, viverra sed convallis et, aliquam sit amet sem. Fusce non lectus sit amet tortor tincidunt sagittis et. Donec eu nisl dolor.</p>
            </section>
            <!-- end highlights -->
            
            <!-- begin preformatted text -->
            <section class="one-fourth">
            	<h2>Computer Output</h2>
                <h3>Preformatted Text</h3>
<pre>
.container {
    width: 92%;
    padding: 4%;
    margin: 0 auto;
}</pre>
				<h3>Computer Code</h3>
                <p>This is an example of computer code: <code>&lt;a href="" title=""&gt; &lt;abbr title=""&gt; &lt;acronym title=""&gt; &lt;b&gt; &lt;blockquote cite=""&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=""&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=""&gt; &lt;strike&gt; &lt;strong&gt; </code></p>
            </section>
            <!-- end preformatted text -->
            
            <!-- begin blockquote -->
            <section class="one-fourth column-last">
            	<h2>Blockquotes</h2>
                <h3>Simple</h3>
                <blockquote class="simple">
                    <div class="quote-content">
                        <p>This is an example of a simple blockquote.</p>
                    </div>	
                    <div class="quote-meta">&mdash; Author, Profession, Company</div>
                </blockquote>
                <h3>Speech Bubble (Testimonial)</h3>
                <blockquote class="speech-bubble">
                    <div class="quote-content">
                        <p>This is an example of a blockquote in a speech bubble.</p>
                        <span class="quote-arrow"></span>
                    </div>
                    <div class="quote-meta">Author, Profession<br>
                        <span class="grey-text">Company</span>
                    </div>
                </blockquote>
            </section>
            <!-- end blockquote -->
            
            <div class="clear"></div>
            <hr>
            
            <!-- begin icon boxes -->
            <section>
            	<h2>Icon Boxes</h2>
                <div class="one-fourth">
                	<div class="iconbox computer">
                        <h4><a href="#"><span class="iconbox-icon"></span>Responsive Layouts</a></h4>
                        <p>Layouts that scale gracefully across varying screen sizes.</p> 
                    </div>
                </div>
                <div class="one-fourth">
                	<div class="iconbox mouse">
                        <h4><a href="#"><span class="iconbox-icon"></span>HTML5 &amp; CSS3 Code</a></h4>
                        <p>Standards-compliant and cross-browser HTML/CSS code.</p>   
                    </div>
                </div>
                <div class="one-fourth">
                	<div class="iconbox applications">
                        <h4><a href="#"><span class="iconbox-icon"></span>Clean Design</a></h4>
                        <p>Professional, clutter-free and aesthetically simple design.</p>    
                    </div>
                </div>
                <div class="one-fourth column-last">
                	<div class="iconbox cog">
                        <h4><a href="#"><span class="iconbox-icon"></span>CMS-Driven Websites</a></h4>
                        <p>CMS-driven websites that you can easily customize.</p>   
                    </div>
                </div>
                
                <div class="clear"></div>
                
                <div class="one-fourth">
                	<div class="iconbox globe">
                        <h4><a href="#"><span class="iconbox-icon"></span>Search Engine Optimization</a></h4>
                        <p>Get the maximum exposure from search engines.</p>   
                    </div>
                </div>
                <div class="one-fourth">
                	<div class="iconbox write">
                        <h4><a href="#"><span class="iconbox-icon"></span>Copywriting</a></h4>
                        <p>Creative and engaging words that provoke action.</p>   
                    </div>
                </div>
                <div class="one-fourth">
                	<div class="iconbox address-book">
                        <h4><a href="#"><span class="iconbox-icon"></span>Customer Support</a></h4>
                        <p>Professional customer service that exceeds expectations.</p>    
                    </div>
                </div>
                <div class="one-fourth column-last">
                	<div class="iconbox chemical">
                        <h4><a href="#"><span class="iconbox-icon"></span>IT Solutions</a></h4>
                        <p>Connecting technology to your business needs.</p>   
                    </div>
                </div>
                <div class="clear"></div>
            </section>
            <!-- end icon boxes -->
            
            <hr>
            
            <!-- begin infobox -->
            <section>
            	<h2>Info Box</h2>
            	<div class="infobox">
                	<div class="infobox-inner">
                        <a class="button large" href="#">Button Text</a>
                        <div class="with-button">
                        	<h2>Suspendisse Cursus Diam Quis Tortor Posuere Vehicula</h2>
                            <p>Aenean nec ante diam. Maecenas purus purus, pretium nec cursus ac, pharetra ac eros. Sed malesuada mauris nec erat porta et ultricies leo cursus. Duis ultricies, tellus nec convallis ornare, orci orci suscipit felis, id varius tellus nunc id felis.</p>
                        </div>
                        <a class="button large mobile-button" href="http://www.cssmoban.com/">Learn More</a>
                    </div>
                </div>
			</section>
            <!-- end infobox -->
            
            <hr>
            
            <!-- begin lists -->
            <section>
            	<h2>Lists</h2>
                <h3>Unordered Lists</h3>
                <div class="one-fourth">
                	<ul class="arrow">
                    	<li>Arrow List Item</li>
                        <li>Arrow List Item</li>
                        <li>Arrow List Item</li>
                        <li>Arrow List Item</li>
                    </ul>
                </div>
                <div class="one-fourth">
                	<ul class="circle">
                    	<li>Circle List Item</li>
                        <li>Circle List Item</li>
                        <li>Circle List Item</li>
                        <li>Circle List Item</li>
                    </ul>
                </div>
                <div class="one-fourth">
                	<ul class="square">
                    	<li>Square List Item</li>
                        <li>Square List Item</li>
                        <li>Square List Item</li>
                        <li>Square List Item</li>
                    </ul>
                </div>
                <div class="one-fourth column-last">
                	<ul class="check">
                    	<li>Check List Item</li>
                        <li>Check List Item</li>
                        <li>Check List Item</li>
                        <li>Check List Item</li>
                    </ul>
                </div>
                
                <div class="clear"></div>
                
                <h3>Ordered Lists</h3>
                <div class="one-fourth">
                	<ol class="decimal">
                    	<li>Decimal List Item</li>
                        <li>Decimal List Item</li>
                        <li>Decimal List Item</li>
                        <li>Decimal List Item</li>
                    </ol>
                </div>
                <div class="one-fourth">
                	<ol class="upper-roman">
                    	<li>Upper-Roman List Item</li>
                        <li>Upper-Roman List Item</li>
                        <li>Upper-Roman List Item</li>
                        <li>Upper-Roman List Item</li>
                    </ol>
                </div>
                <div class="one-fourth">
                	<ol class="lower-alpha">
                    	<li>Lower-Alpha List Item</li>
                        <li>Lower-Alpha List Item</li>
                        <li>Lower-Alpha List Item</li>
                        <li>Lower-Alpha List Item</li>
                    </ol>
                </div>
                <div class="one-fourth column-last">
                	<ol class="upper-alpha">
                    	<li>Upper-Alpha List Item</li>
                        <li>Upper-Alpha List Item</li>
                        <li>Upper-Alpha List Item</li>
                        <li>Upper-Alpha List Item</li>
                    </ol>
                </div>
                <div class="clear"></div>
            </section>
            <!-- end lists -->
            
            <hr>
            
            <!-- begin table -->
            <section>
            	<h2>Table</h2>
                <table class="gen-table">
                    <caption>
                    Table Caption
                    </caption>
                    <thead>
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                            <th>Header 4</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td colspan="4">Table Footer</td>
                        </tr>
                    </tfoot>
                    <tbody>
                        <tr>
                            <td>Item 1</td>
                            <td>Description</td>
                            <td>Subtotal:</td>
                            <td>&#36;1.00</td>
                        </tr>
                        <tr class="odd">
                            <td>Item 2</td>
                            <td>Description</td>
                            <td>Discount:</td>
                            <td>&#36;2.00</td>
                        </tr>
                        <tr>
                            <td>Item 3</td>
                            <td>Description</td>
                            <td>Shipping:</td>
                            <td>&#36;3.00</td>
                        </tr>
                        <tr class="odd">
                            <td>Item 4</td>
                            <td>Description</td>
                            <td>Tax:</td>
                            <td>&#36;4.00</td>
                        </tr>
                        <tr class="row-last">
                            <td><strong>All Items</strong></td>
                            <td><strong>Description</strong></td>
                            <td><strong>Total:</strong></td>
                            <td><strong>&#36;10.00</strong></td>
                        </tr>
                    </tbody>
                </table>
            </section>
            <!-- end table -->
            
            <!-- end main content -->
        </section>
        <!-- end content -->             
    
	<!-- begin footer -->
	<footer id="footer">
    	<div class="container">
            <!-- begin footer top -->
            <div id="footer-top">
                <div class="one-fourth">
                	<div class="widget">
                        <h3>About Us</h3>
                        <p>Finesse is a responsive business and portfolio theme carefully handcrafted using the latest technologies.</p>
                        <p>It features a clean design, as well as extended functionality that will come in very handy.</p>
                    </div>
                </div>
                <div class="one-fourth">
                	<div class="widget latest-posts">
                        <h3>Latest Posts</h3>
                        <ul>
                            <li>
                                <a href="blog-post.html">How to Make Innovative Ideas Happen</a>
                                <span>March 10, 2012</span>
                            </li>
                            <li> <a href="blog-post.html">Web Development for the iPhone and iPad</a>
                                <span>March 10, 2012</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="one-fourth">
                	<div class="widget twitter-widget">
                    	<h3>Latest Tweets</h3>
                        <div class="tweet"></div>
                    </div>
                </div>
                <div class="one-fourth column-last">
                	<div class="widget contact-info">
                    	<h3>Contact Info</h3>
                        <p class="address"><strong>Address:</strong> 123 Street, City, Country</p>
                        <p class="phone"><strong>Phone:</strong> (123) 456-7890</p>
                        <p class="email"><strong>Email:</strong> <a href="mailto:info@finesse.com">info@finesse.com</a></p>
                        <div class="social-links">
                        	<h4>Follow Us</h4>
                            <ul>
                            	<li class="twitter"><a href="#" title="Twitter" target="_blank">Twitter</a></li>
                                <li class="facebook"><a href="#" title="Facebook" target="_blank">Facebook</a></li>
                                <li class="google"><a href="#" title="Google+" target="_blank">Google+</a></li>
                                <li class="youtube"><a href="#" title="YouTube" target="_blank">YouTube</a></li>
                                <li class="skype"><a href="#" title="Skype" target="_blank">Skype</a></li>
                                <li class="rss"><a href="#" title="RSS" target="_blank">RSS</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end footer top -->	
            
            <!-- begin footer bottom -->
            <div id="footer-bottom">
            	<div class="one-half">
                	<p>Copyright &copy; 2012 Finesse. Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>
                </div>
                
                <div class="one-half column-last">
                	<nav id="footer-nav">
                        <ul>
                            <li><a href="index.html">Home</a> &middot;</li>
                            <li><a href="about-us.html">Templates</a> &middot;</li>
                            <li><a href="elements.html">Features</a> &middot;</li>
                            <li><a href="portfolio.html">Portfolio</a> &middot;</li>
                            <li><a href="blog.html">Blog</a> &middot;</li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- end footer bottom -->	
        </div>
	</footer>
	<!-- end footer -->
</div>
<!-- end container -->

</body>
</html>